<template>
  <el-container class="details-container">
    <el-header height="70px">
      <Navigation />
    </el-header>

    <el-main style="padding-top:70px;">
      <Label />
      <Waterfall :artData="artData" :count="artData.length"/>
    </el-main>

    <el-footer style="padding:0;">
      <Footer style="background-color:#000000;" />
    </el-footer>

  </el-container>
</template>

<script>
// components
//common
import Navigation from '@/components/common/navigation/Navigation2.vue'
import Footer from '@/components/common/footer/Footer.vue'
// import Footer from '@/components/common/footer/Footer.vue'
import Label from '@/components/common/label/Label2.vue'
import Waterfall from '@/components/common/waterfall/Waterfall3.vue'

import { getDynamic } from '@/api/data'
export default {
  components: {
    Navigation,
    Footer,
    Label,
    Waterfall
  },
  data () {
    return {
      artData: []
    }
  },
  methods: {
    async loadData () {
      const { data: res } = await getDynamic()
      console.log(res)
      for (let i of res.dynamic.arrData) {
        if (i.classify == '加盟') {
          this.artData.push(i)
        }
      }
      console.log(this.artData)
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang='less' scoped>
.details-container {
  position: relative;
  .el-header {
    position: fixed;
    top: 00px;
    z-index: 10000;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.el-header {
  background-color: var(--color-background);
}
@media only screen and (max-width: 786px) {
  .container {
    padding: 1rem 20px;
  }
}
</style>